<template>
	<div class="sub">
		<div class="search">
			<input type="text" placeholder="搜索"/>
			<span class="iconfont icon-sousuo"></span>
		</div>
		
		<ul>
			<li v-for="(v,i) in arr" :key="i" @click="look()">
				<img :src="v.img" />
				<div class="text">
					<h5>{{v.title}}</h5>
					<p>{{v.name}}</p>
				</div>
				<span class="iconfont icon-jiantou1"></span>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				arr:[
					{"img":"img/sub1.png","title":"创业基础","name":"朱创录"},
					{"img":"img/sub2.png","title":"人工智能","name":"朱创录"},
					{"img":"img/sub3.png","title":"算法概论","name":"朱创录"},
					{"img":"img/sub4.png","title":"计算机专业英语","name":"朱创录"},
					{"img":"img/sub5.png","title":"软件项目管理","name":"朱创录"},
					{"img":"img/sub5.png","title":"软件项目管理","name":"朱创录"},
					{"img":"img/sub6.png","title":"已删除课程"}
				]
			}
		},
		methods:{
			look(){
				this.$router.push("/subdetails")
			}
		}
		
	}
</script>

<style scoped="scoped" lang="scss">
	.sub{
		width: 100%;
		padding-top: 0.51rem;
		
		.search{
			position: relative;
			input{
				width: 90%;
				height: 0.31rem;
				background-color: #FFFFFF;
				border-radius: 0.25rem;
				margin-left: 0.16rem;
				border: 0px;
				margin-top: 0.1rem;
			}
			input::-webkit-input-placeholder {
				text-align: center;
				font-size: 0.15rem;
				color: #c6c8c7;
			}
			span{
				position: absolute;
				top: 0.17rem;
				left: 41%;
			}
		}
		ul{
			width: 90%;
			margin: auto;
			padding-top: 0.19rem;
			li{
				height: 0.74rem;
				background-color: #FFFFFF;
				margin-bottom: 0.16rem;
				border-radius: 0.15rem;
				display: flex;
				box-sizing: border-box;
				padding: 0.15rem 0.14rem;
				img{
					width: 0.44rem;
					height: 0.44rem;
				}
				.text{
					width: 2.47rem;
					margin-left: 0.15rem;
					h5{
						font-size: 0.15rem;
						font-weight: normal;
					}
					p{
						font-size: 0.12rem;
						color: #898e9a;
						margin-top: 0.04rem;
					}
				}
				span{
					margin-top: 0.1rem;
				}
			}
			li:last-of-type{
				h5{
					font-size: 0.15rem;
					font-weight: normal;
					margin-top: 0.12rem;
				}
			}
		}
	}
</style>
